import React, {
  useState,
  useEffect,
  Component,
  useRef,
  MutableRefObject,
} from 'react';
import './index.less';
import { connect } from 'umi';
import {
  Modal,
  Row,
  Col,
  Checkbox,
  Space,
  Collapse,
  Card,
  Upload,
  Tabs,
  Form,
  Input,
  Button,
  Select,
  DatePicker,
  Cascader,
  Tag,
} from 'antd';
import ImgCrop from 'antd-img-crop';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const { Option } = Select;

import {
  CaretRightOutlined,
  MinusCircleOutlined,
  PlusOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
import moment from '_moment@2.29.1@moment';
const { TabPane } = Tabs;
// 表单
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

//规则校验
const validateMessages = {
  required: '${label} 是必选项！',
};
//校验时间
const rangeConfig = {
  rules: [{ type: 'array' as const, required: true, message: '请选择时间' }],
};
//级联菜单配置
const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    id: '0',
    isLeaf: false,
  },
];
//级联菜单
function onChange(value) {
  console.log(value);
}
import {
  postBasicInfo,
  getFirestcities,
  postDetail,
  iditor,
} from '../../../api/modules/activies.js';
const Basicinfo = (props) => {
  //获取表单  控制实例
  const [form] = Form.useForm();
  const [givedata, setgivedata] = useState({
    uid: '',
    url: '',
  });

  form.setFieldsValue({
    user: {
      inputadd: [
        {
          first: '名字一',
          rangetime: moment('2020-10-10 12:00', 'YYYY-MM-DD HH:mm'),
        },
        {
          first: '名字二',
          rangetime: moment('2020-10-10 12:00', 'YYYY-MM-DD HH:mm'),
        },
      ],
    },
  });

  //这里表单赋值操作  编辑功能
  var formdatainnt = {
    user: { name: '', timeLast: [] },
  };
  /*   const inputEl: MutableRefObject<any> = useRef(null);
    console.log(inputEl, 'inputEl'); */

  // const [editorData, setIditor] = useState(formdatainnt)
  const isIditor = async () => {
    if (!props.id) {
      return;
    }
    const { data: res } = await postDetail({
      activityBasicId: props.id,
    });
    console.log(res, 'res');
    //存编辑  给活动信息用
    props.dispatch({
      type: 'formdata/getEditor',
      payload: res,
    });
    //赋值
    formdatainnt.user.name = res.activityName;
    formdatainnt.user.timeLast = [
      moment(res.startDate, 'YYYY-MM-DD HH:mm'),
      moment(res.endDate, 'YYYY-MM-DD HH:mm'),
    ];
    //把图片给组件
    setgivedata({
      uid: res.pictureKey,
      url: res.pictureUrl,
    });
    form.setFieldsValue({
      ...res,
      user: {
        province: [res.provinceName, res.cityName],
        activeposition: res.activitySite,
        introduction: res.activityContent,
        hotser: res.activityOrganizers,
      },
    });
  };
  useEffect(() => {
    isIditor();
  }, []);

  const onFinish = async (values: any) => {
    //处理时间
    const start = moment(values.user.timeLast[0]._d).format('YYYY-MM-DD HH:mm');
    const end = moment(values.user.timeLast[1]._d).format('YYYY-MM-DD HH:mm');
    var { user } = values;
    //填完信息  可以填写下一项
    props.setFlag(false);
    props.setNumber('2');
    //scheduleVOSList  日程名称
    var scheduleVOSList;
    console.log(user.inputadd, 'add');
    if (user.inputadd !== undefined) {
      var scheduleVOSList = user.inputadd.map((item) => {
        return {
          scheduleName: item.first,
          scheduleDate: moment(item.rangetime).format('YYYY-MM-DD HH:mm'),
        };
      });
    }
    console.log(user, '符合条件');
    var formData = {
      activityName: values.activityName,
      activityContent: user.introduction,
      startDate: start,
      endDate: end,
      //图片
      pictureKey: imgKey,
      thumbnailPictureKey: imgKey,
      pictureUrl: imgActurl,
      thumbnailPictureUrl: imgActurl,

      //省份
      provinceCode: user.province[0],
      cityCode: user.province[1],

      //是否有报名活动
      isSignUp: 1,
      //是否有抢票活动
      isRobTickets: 0,
      //是否有签到活动
      isSignIn: 0,
      // 是否有投票活动
      isVote: 0,
      //是否有抽奖活动
      isLuckyDraw: 0,
      scheduleVOS: scheduleVOSList || '',
    };
    props.dispatch({
      type: 'formdata/getFrom',
      payload: formData,
    });
  };
  //城市列表
  const [citylist, setcitylist] = useState(options);
  var imgActurl = null;
  var imgKey = null;
  //渲染一级城市列表；
  function getcltieslist() {
    getFirestcities({ addressLevel: 1 }).then((res) => {
      console.log(res.data, '城市列表1');
      var optionNew = res.data.map((item) => {
        return {
          value: item.addressCode,
          label: item.addressName,
          isLeaf: false,
        };
      });
      setcitylist(() => {
        return optionNew;
      });
    });
  }
  //初始值
  //二级城市
  function onChange(value, selectedOptions) {}
  //获取子组件 图片地址
  const getimgUrl = (fileUrl, fileKey) => {
    console.log(fileUrl, 'fileUrlKEY', fileKey);
    imgActurl = fileUrl;
    imgKey = fileKey;
  };
  //渲染二级菜单
  const loadData = (selectedOptions) => {
    console.log(selectedOptions, 'selectedOptions');
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    getFirestcities({
      addressLevel: 2,
      parentId: Number(selectedOptions[0].value),
    }).then((res) => {
      console.log(res.data, '城市列表2');
      //刷新菜单
      selectedOptions[0].children = [];
      for (let i = 0; i < res.data.length; i++) {
        const item = {
          value: res.data[i].addressCode,
          label: res.data[i].addressName,
        };
        console.log(item, 'itemcity');
        selectedOptions[0].children.push(item);
        targetOption.loading = false;
      }
      const newlist = [...citylist];
      setcitylist(() => {
        return newlist;
      });
    });
  };
  useEffect(() => {
    getcltieslist();
  }, []);
  return (
    <>
      <div className="padding">
        <Form
          initialValues={formdatainnt}
          form={form}
          {...layout}
          name="nest-messages"
          onFinish={onFinish}
          validateMessages={validateMessages}
        >
          {/* 名字 */}
          <Form.Item
            name="activityName"
            style={{ width: '360px' }}
            label="活动名称"
            rules={[{ required: true }]}
          >
            <Input />
          </Form.Item>
          {/* 地址 */}
          <Form.Item
            name={['user', 'province']}
            label="地区选择"
            rules={[{ required: true, message: 'Province is required' }]}
          >
            <Cascader
              options={citylist}
              loadData={loadData}
              placeholder="Please select"
              changeOnSelect
            />
          </Form.Item>
          {/* 时间 */}
          <Form.Item
            name={['user', 'timeLast']}
            label="活动时间"
            {...rangeConfig}
          >
            <RangePicker
              style={{ width: '400px' }}
              showTime
              format="YYYY-MM-DD HH:mm"
            />
          </Form.Item>
          {/* 活动地点 */}
          <Form.Item
            style={{ width: '360px' }}
            name={['user', 'activeposition']}
            label="活动地点"
          >
            <Input />
          </Form.Item>
          {/* 活动主办方 */}
          <Form.Item
            style={{ width: '360px' }}
            name={['user', 'hotser']}
            label="活动主办方"
          >
            <Input />
          </Form.Item>
          {/* 活动内容 */}
          <Form.Item
            style={{ width: '360px' }}
            name={['user', 'introduction']}
            rules={[{ required: true, message: 'Province is required' }]}
            label="活动内容"
          >
            <Input.TextArea />
          </Form.Item>
          {/* 活动图缩略图 */}
          <Form.Item
            style={{ width: '360px' }}
            valuePropName="fileList"
            name={['user', 'imglist']}
            label="活动内容"
          >
            <ImgShow
              givedata={givedata}
              getimgUrl={(url, imgkey) => getimgUrl(url, imgkey)}
            ></ImgShow>
          </Form.Item>
          <br />
          {/* 添加日程 */}
          <div className="datemak" style={{ width: '1200px' }}>
            日程：{' '}
            <Form.List name={['user', 'inputadd']}>
              {(fields, { add, remove }) => (
                <>
                  {fields.map(({ key, name, fieldKey, ...restField }) => (
                    <div key={key} className="layoutinput">
                      <Space
                        style={{ display: 'flex', marginBottom: 8 }}
                        align="baseline"
                      >
                        <Form.Item
                          style={{ marginRight: '80px' }}
                          {...restField}
                          label="项目名称"
                          name={[name, 'first']}
                          fieldKey={[fieldKey, 'first']}
                          rules={[{ required: true, message: '必填项' }]}
                        >
                          <Input
                            style={{ width: '400px' }}
                            placeholder="请输入项目名称，如爱好"
                          />
                        </Form.Item>
                        <Form.Item
                          {...restField}
                          label="项目名称"
                          name={[name, 'rangetime']}
                          fieldKey={[fieldKey, 'rangetime']}
                          rules={[{ required: true, message: '必填项' }]}
                        >
                          <DatePicker
                            style={{ width: '300px' }}
                            showTime
                            format="YYYY-MM-DD HH:mm"
                          />
                        </Form.Item>
                        <DeleteOutlined
                          style={{ color: 'red' }}
                          onClick={() => remove(name)}
                        />
                      </Space>
                    </div>
                  ))}
                  <Form.Item>
                    <Button
                      style={{ width: '100px', margin: '40px auto' }}
                      type="dashed"
                      onClick={() => add()}
                      block
                      icon={<PlusOutlined />}
                    >
                      添加
                    </Button>
                  </Form.Item>
                </>
              )}
            </Form.List>
          </div>
          {/* 提交 */}
          <Form.Item
            className="submitadd"
            wrapperCol={{ ...layout.wrapperCol, offset: 0 }}
          >
            <Button htmlType="submit" type="primary">
              下一步
            </Button>
            <Button htmlType="submit">预览</Button>
            <Button htmlType="submit">保存草稿</Button>
            <Button onClick={() => form.resetFields()}>清空表单</Button>
          </Form.Item>
        </Form>
      </div>
    </>
  );
};

//上传图片的组件
const ImgShow = (props) => {
  console.log(props, 'propsimg');
  useEffect(() => {
    if (props.givedata.uid !== '') {
      setFileList((state) => {
        return [props.givedata];
      });
    }
  }, [props.givedata]);
  const [fileList, setFileList] = useState([]);
  const onChange = ({ file, fileList: newFileList }) => {
    console.log(fileList, 'adsad', file);
    setFileList(() => {
      return newFileList;
    });
    if (file.status === 'done') {
      console.log(file.response.data, 'url', file.response.data.imgKey);
      props.getimgUrl(file.response.data.imgUrl, file.response.data.imgKey);
    }
  };

  const onPreview = async (file) => {
    let src = file.url;
    if (!src) {
      src = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsDataURL(file.originFileObj);
        reader.onload = () => resolve(reader.result);
      });
    }
    const image = new Image();
    image.src = src;
    const imgWindow = window.open(src);
    imgWindow.document.write(image.outerHTML);
  };
  return (
    <ImgCrop style={{ marginLeft: '20px' }} rotate>
      <Upload
        action="/campus/campusweb/upload/pictureUpload"
        listType="picture-card"
        name="multipartFile"
        fileList={fileList}
        onChange={onChange}
        onPreview={onPreview}
      >
        {fileList.length < 5 && '+ Upload'}
      </Upload>
    </ImgCrop>
  );
};
// 卡片布局
function Addbasic(props) {
  console.log(props.formdata, 'card');
  const queryId = props.location.query.id;

  //dva  编辑消息
  const { idtorData } = props.formdata;
  //下一步禁止按钮
  const [flag, setFlag] = useState(true);
  const [key, setkey] = useState('1');
  function changeTabs(val) {
    setkey(val);
  }

  return (
    <div>
      <div className="title22">
        <p>创建活动/添加</p>
        <h3 className="addtilte22">添加</h3>
      </div>
      <div className="card">
        <Tabs
          style={{ padding: '15px' }}
          activeKey={key}
          defaultActiveKey="2"
          onTabClick={(val) => changeTabs(val)}
        >
          <TabPane tab={<span> 基本信息</span>} key="1">
            <Basicinfo
              id={queryId}
              dispatch={props.dispatch}
              setFlag={setFlag}
              setNumber={setkey}
            />
          </TabPane>
          <TabPane disabled={flag} tab={<span> 活动信息 </span>} key="2">
            <ActiveInfo id={queryId} mydata={props.formdata}></ActiveInfo>
          </TabPane>
        </Tabs>
      </div>
    </div>
  );
}
export default connect(({ formdata }) => ({ formdata }))(Addbasic);
// 活动信息 组件
const { Panel } = Collapse;
const text = `
  A dog is a type of domesticated animal.
`;
//获取表单方法

//抽奖的图片  的数据
const normFile = (e: any) => {
  console.log(e, 'e');
  console.log('Upload event:', e);
  if (Array.isArray(e)) {
    return e;
  }
  return e && e.fileList;
};
//活动信息表单
const ActiveInfo = (props) => {
  function onFinishbaoming(fieldsValue) {
    const rangeTimeValue = fieldsValue['range-time-picker'];
    const values = {
      ...fieldsValue,
      'range-time-picker': [
        rangeTimeValue[0].format('YYYY-MM-DD HH:mm'),
        rangeTimeValue[1].format('YYYY-MM-DD HH:mm'),
      ],
      'range-time-picker-vote': [
        rangeTimeValue[0].format('YYYY-MM-DD HH:mm'),
        rangeTimeValue[1].format('YYYY-MM-DD HH:mm'),
      ],
      'range-time-picker-choujinang': [
        rangeTimeValue[0].format('YYYY-MM-DD HH:mm'),
        rangeTimeValue[1].format('YYYY-MM-DD HH:mm'),
      ],
    };
    console.log(values, 'values');
    //处理数据
    //报名的多选
    const requiredEntryFormsList = values.baoming.checkBoxinfo.map((item) => {
      return {
        inputType: 1,
        value: item,
      };
    });
    //报名的添加项
    if (values.baoming.inputadd !== undefined) {
      var optionalEntryFormsList = values.baoming.inputadd.map(
        (item, index) => {
          return {
            inputType: 1,
            value: item.first,
            key: index,
          };
        },
      );
    }
    // 定义活动信息表单数据
    const activityVOS = [
      //报名的表单
      {
        activityType: 1,
        startDate: values['range-time-picker'][0],
        endDate: values['range-time-picker'][1],
        numberLimit: values.baoming.peoplecount,
        // 多项选择
        requiredEntryForms: requiredEntryFormsList || '',
        // 添加活动
        optionalEntryForms: optionalEntryFormsList || '',
      },
    ];
    console.log(activityVOS, 'activityVOS');
    console.log(props.mydata.FormData);
    var p = { ...props.mydata.FormData, activityVOS };
    if (props.id) {
      var p = {
        activityBasicId: props.id,
        ...props.mydata.FormData,
        activityVOS,
      };
    }
    console.log(p, 'p');
    postIditor(p);
    //提交编辑  或者添加
  }
  const postIditor = async (params) => {
    const data = await iditor(params);
    console.log(data, 'postIditor');
  };
  console.log(props, 'active');
  //编辑
  const { idtorData } = props.mydata;
  //展示模态框
  const [isModalVisible, setIsModalVisible] = useState(false);
  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const showModal = () => {
    setIsModalVisible(true);
  };
  //日期选择器
  function onOk(value) {
    console.log('onOk: ', value);
  }
  //时间选择器
  function onChange1(value, dateString) {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
  }
  //点击折叠面板
  const [clloarKey, setclloarKey] = useState([1]);
  const getkey = (key) => {
    setclloarKey(() => {
      return key;
    });
  };
  //多选  选择  表单
  function log(val) {
    var node = document.querySelector(`.itme${val}`);
    var father = node?.parentNode;
    father?.removeChild(node);
  }
  //处理编辑
  const [form] = Form.useForm();
  useEffect(() => {
    if (idtorData === undefined) {
      return;
    }
    var form1 = idtorData.activityVOS[0];
    //处理多选项目
    if (form1.requiredEntryForms !== undefined) {
      var checkdata = form1.requiredEntryForms.map((item) => {
        return item.value;
      });
    }
    form.setFieldsValue({
      'range-time-picker': [
        moment(form1.startDate, 'YYYY-MM-DD HH:mm'),
        moment(form1.endDate, 'YYYY-MM-DD HH:mm'),
      ],
      baoming: {
        peoplecount: form1.numberLimit,
        checkBoxinfo: checkdata,
      },
    });
  }, []);
  return (
    <div>
      <div className="desc">选择活动</div>
      <div className="activiesChose">
        <div className="title">
          选择你想要创建的活动 <span>（可多选）</span>
        </div>
        <Tag
          className="tagsIcon"
          color="#1a257a"
          closable
          onClose={() => log(1)}
        >
          报名
        </Tag>
        <Tag
          className="tagsIcon"
          color="#1a257a"
          closable
          onClose={() => log(2)}
        >
          投票
        </Tag>
        <Tag
          className="tagsIcon"
          color="#1a257a"
          closable
          onClose={() => log(3)}
        >
          签到
        </Tag>
        <Tag
          className="tagsIcon"
          color="#1a257a"
          closable
          onClose={() => log(4)}
        >
          抢票
        </Tag>
        <Tag
          className="tagsIcon"
          color="#1a257a"
          closable
          onClose={() => log(5)}
        >
          抽奖
        </Tag>
      </div>
      <Card style={{ width: '100%', marginTop: '45px', padding: '10px' }}>
        <Form form={form} name="sixpart" onFinish={onFinishbaoming}>
          <Collapse
            className="site-collapse-custom-collapse"
            onChange={getkey}
            defaultActiveKey="1"
            activeKey={clloarKey}
            ghost
            expandIconPosition="right"
            expandIcon={({ isActive }) => (
              <CaretRightOutlined rotate={isActive ? 90 : 0} />
            )}
          >
            <Panel
              className="itme1"
              style={{ marginBottom: '20px' }}
              header={<h2>报名</h2>}
              key="1"
            >
              <p className="descp">
                <span></span> 基本信息
              </p>
              <div className="flex2">
                <Form.Item
                  name="range-time-picker"
                  label="活动时间"
                  {...rangeConfig}
                >
                  <RangePicker
                    showTime={{ format: 'HH:mm' }}
                    format="YYYY-MM-DD HH:mm"
                  />
                </Form.Item>
                <div className="peopelCount">
                  <Form.Item name={['baoming', 'peoplecount']}>
                    <Input
                      type="number"
                      style={{ width: '260px' }}
                      placeholder="报名人数"
                    />
                  </Form.Item>
                </div>
              </div>
              <p>选择您希望活动参加者必须填写的信息</p>
              <Form.Item name={['baoming', 'checkBoxinfo']}>
                <Checkbox.Group>
                  <Row>
                    <Checkbox value="姓名">姓名</Checkbox>
                    <Checkbox value="性别">性别</Checkbox>
                    <Checkbox value="图片">图片</Checkbox>
                    <Checkbox value="手机号">手机号</Checkbox>
                    <Checkbox value="生日">生日</Checkbox>
                    <Checkbox value="QQ号">QQ号</Checkbox>
                    <Checkbox value="邮箱">邮箱</Checkbox>
                    <Checkbox value="学院">学院</Checkbox>
                  </Row>
                  <Row>
                    <Checkbox value="年级">年级</Checkbox>
                    <Checkbox value="班级">班级</Checkbox>
                    <Checkbox value="学号">学号</Checkbox>
                    <Checkbox value="特长">特长</Checkbox>
                    <Checkbox value="备注">备注</Checkbox>
                  </Row>
                </Checkbox.Group>
              </Form.Item>
              <p className="descp">
                <span></span> 可添加补充项目
              </p>
              <Form.List name={['baoming', 'inputadd']}>
                {(fields, { add, remove }) => (
                  <>
                    {fields.map(({ key, name, fieldKey, ...restField }) => (
                      <div key={key} className="layoutinput">
                        <Space
                          style={{ display: 'flex', marginBottom: 8 }}
                          align="baseline"
                        >
                          <Form.Item
                            {...restField}
                            label="项目名称"
                            name={[name, 'first']}
                            fieldKey={[fieldKey, 'first']}
                            rules={[{ required: true, message: '必填项' }]}
                          >
                            <Input
                              style={{ width: '400px' }}
                              placeholder="请输入项目名称，如爱好"
                            />
                          </Form.Item>
                          <DeleteOutlined
                            style={{ color: 'red' }}
                            onClick={() => remove(name)}
                          />
                        </Space>
                      </div>
                    ))}
                    <Form.Item>
                      <Button
                        type="dashed"
                        onClick={() => add()}
                        block
                        icon={<PlusOutlined />}
                      >
                        添加
                      </Button>
                    </Form.Item>
                  </>
                )}
              </Form.List>
            </Panel>
            <Panel
              className="itme2"
              style={{ marginBottom: '20px' }}
              header={<h2>投票</h2>}
              key="2"
            >
              <p>基本信息：</p>
              <div className="flex2">
                <Form.Item
                  name="range-time-picker-vote"
                  label="活动时间"
                  {...rangeConfig}
                >
                  <RangePicker
                    onChange={onChange1}
                    showTime={{ format: 'HH:mm' }}
                    format="YYYY-MM-DD HH:mm"
                  />
                </Form.Item>
                <Form.Item
                  name={['vote', 'select111']}
                  rules={[{ required: true, message: 'Please select gender!' }]}
                  label="投票方式"
                >
                  <Select
                    style={{ width: '260px' }}
                    mode="multiple"
                    placeholder="Please select favourite colors"
                  >
                    <Option value="red">每日可投</Option>
                    <Option value="green">周末可投</Option>
                    <Option value="blue">工作日可投</Option>
                  </Select>
                </Form.Item>
              </div>

              <div className="flex2">
                <Form.Item
                  name={['vote', 'singledatvote']}
                  label="单日可投上限"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <Input type="number" style={{ width: '260px' }}></Input>
                </Form.Item>
                <Form.Item
                  name={['vote', 'revoteCount']}
                  label="重复投票上限"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <Input type="number" style={{ width: '260px' }}></Input>
                </Form.Item>
              </div>

              <p>投票对象：</p>
              <div className="flex2">
                <Form.Item
                  name={['vote', 'name']}
                  label="姓名"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <TextArea
                    style={{ width: '260px' }}
                    placeholder="Autosize height with minimum and maximum number of lines"
                    autoSize={{ minRows: 2, maxRows: 6 }}
                  />
                </Form.Item>
                <Form.Item
                  name={['vote', 'desc']}
                  label="说明"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <TextArea
                    style={{ width: '260px' }}
                    placeholder="Autosize height with minimum and maximum number of lines"
                    autoSize={{ minRows: 2, maxRows: 6 }}
                  />
                </Form.Item>
              </div>
              <div className="flex2">
                <Form.Item
                  name={['vote', 'name1']}
                  label="姓名1"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <TextArea
                    style={{ width: '260px' }}
                    placeholder="Autosize height with minimum and maximum number of lines"
                    autoSize={{ minRows: 2, maxRows: 6 }}
                  />
                </Form.Item>
                <Form.Item
                  name={['vote', 'desc2']}
                  label="说明2"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <TextArea
                    style={{ width: '260px' }}
                    placeholder="Autosize height with minimum and maximum number of lines"
                    autoSize={{ minRows: 2, maxRows: 6 }}
                  />
                </Form.Item>
              </div>

              {/* 图片组件 */}
              <p>图片</p>
              <Imguplaoder></Imguplaoder>
              <Button>
                <PlusOutlined />
                添加
              </Button>
            </Panel>

            <Panel
              className="itme3"
              style={{ marginBottom: '20px' }}
              header={<h2>签到</h2>}
              key="3"
            >
              <p>基本信息：</p>
              <div className="flex2">
                <Form.Item
                  name="range-time-picker-vote"
                  label="活动时间"
                  {...rangeConfig}
                >
                  <RangePicker
                    showTime={{ format: 'HH:mm' }}
                    format="YYYY-MM-DD HH:mm"
                  />
                </Form.Item>
                <Form.Item
                  name={['signIn', 'select111']}
                  rules={[{ required: true, message: '天下签到方式' }]}
                  label="投票方式"
                >
                  <Select
                    style={{ width: '260px' }}
                    mode="multiple"
                    placeholder="Please select favourite colors"
                  >
                    <Option value="red">线上签到</Option>
                    <Option value="green">周末可投</Option>
                    <Option value="blue">工作日可投</Option>
                  </Select>
                </Form.Item>
              </div>
            </Panel>

            <Panel
              className="itme4"
              style={{ marginBottom: '20px' }}
              header={<h2>抢票</h2>}
              key="4"
            >
              <p>基本信息</p>
              <div className="flex2">
                <Form.Item
                  name="range-time-picker-qiangpiao"
                  label="活动时间"
                  {...rangeConfig}
                >
                  <RangePicker
                    showTime={{ format: 'HH:mm' }}
                    format="YYYY-MM-DD HH:mm"
                  />
                </Form.Item>
                <Form.Item
                  name={['qiangpiao', 'select111']}
                  rules={[{ required: true, message: '天下签到方式' }]}
                  label="门票数量"
                >
                  <Input type="number" placeholder="不填即无限制"></Input>
                </Form.Item>
              </div>
              <Form.Item name={['qiangpiao', 'checkBoxinfo']}>
                <Checkbox.Group>
                  <Row>
                    <Checkbox value="姓名">姓名</Checkbox>
                    <Checkbox value="性别">性别</Checkbox>
                    <Checkbox value="图片">图片</Checkbox>
                    <Checkbox value="手机号">手机号</Checkbox>
                    <Checkbox value="生日">生日</Checkbox>
                    <Checkbox value="QQ号">QQ号</Checkbox>
                    <Checkbox value="邮箱">邮箱</Checkbox>
                    <Checkbox value="学院">学院</Checkbox>
                  </Row>
                  <Row>
                    <Checkbox value="年级">年级</Checkbox>
                    <Checkbox value="班级">班级</Checkbox>
                    <Checkbox value="学号">学号</Checkbox>
                    <Checkbox value="特长">特长</Checkbox>
                    <Checkbox value="备注">备注</Checkbox>
                  </Row>
                </Checkbox.Group>
              </Form.Item>
            </Panel>

            <Panel
              className="itme5"
              style={{ marginBottom: '20px' }}
              header={<h2>抽奖</h2>}
              key="5"
            >
              <p>基本信息：</p>
              <Form.Item
                name="range-time-picker-choujinang"
                label="活动时间"
                {...rangeConfig}
              >
                <RangePicker
                  showTime={{ format: 'HH:mm' }}
                  format="YYYY-MM-DD HH:mm"
                />
              </Form.Item>
              <div className="flex2">
                <Form.Item
                  name={['choujinang', 'singleCount']}
                  label="每人抽奖次数"
                  rules={[{ required: true, message: '请输入1~9999999的整数' }]}
                >
                  <Input type="number" style={{ width: '260px' }}></Input>
                </Form.Item>
                <Form.Item
                  name={['choujinang', 'desc2']}
                  label="兑奖规则"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <TextArea
                    style={{ width: '260px' }}
                    placeholder="亲输入兑奖规则"
                    autoSize={{ minRows: 1, maxRows: 3 }}
                  />
                </Form.Item>
              </div>
              <p>奖品设置(未中奖)</p>
              <div className="flex2">
                <Form.Item
                  name={['choujinang', 'prizeName']}
                  label="奖品名称"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <Input style={{ width: '260px' }}></Input>
                </Form.Item>
                <Form.Item
                  name={['choujinang', 'prizeAllCount']}
                  label="奖品总数"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <Input type="number" style={{ width: '260px' }}></Input>
                </Form.Item>
              </div>
              <div className="flex2">
                <Form.Item
                  name={['choujinang', 'prizeRate1']}
                  label="中奖率"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <Input style={{ width: '260px' }}></Input>
                </Form.Item>
                <Form.Item
                  name="upload"
                  label="Upload"
                  valuePropName="图片"
                  getValueFromEvent={normFile}
                  extra="asdasd"
                >
                  <Imguplaoder normFile={normFile}></Imguplaoder>
                </Form.Item>
              </div>
              <p>奖品设置(1等奖)</p>
              <div className="flex2">
                <Form.Item
                  name={['choujinang', 'getprizeName']}
                  label="奖品名称"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <TextArea
                    style={{ width: '260px' }}
                    placeholder="Autosize height with minimum and maximum number of lines"
                    autoSize={{ minRows: 1, maxRows: 3 }}
                  />
                </Form.Item>
                <Form.Item
                  name={['choujinang', 'getprizeCount']}
                  label="奖品总数"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <TextArea
                    style={{ width: '260px' }}
                    placeholder="Autosize height with minimum and maximum number of lines"
                    autoSize={{ minRows: 1, maxRows: 3 }}
                  />
                </Form.Item>
              </div>
              <div className="flex2">
                <Form.Item
                  name={['choujinang', 'prizeRate']}
                  label="中奖率"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <Input style={{ width: '260px' }}></Input>
                </Form.Item>

                <Form.Item
                  name="upload"
                  label="图片"
                  valuePropName="fileList"
                  getValueFromEvent={normFile}
                  extra="asdasd"
                >
                  <Imguplaoder normFile={normFile}></Imguplaoder>
                </Form.Item>
              </div>
              {/* 图片组件 */}
              <p>图片</p>

              <Modal
                title="Basic Modal"
                visible={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
              >
                <p>设置奖品（X等奖）</p>
                <div className="flex2">
                  <Form.Item
                    name={['choujinang', 'prizeNameX']}
                    label="奖品名称"
                    rules={[
                      { required: true, message: 'Please select gender!' },
                    ]}
                  >
                    <Input style={{ width: '260px' }}></Input>
                  </Form.Item>
                </div>
                <Form.Item
                  name={['choujinang', 'prizeCountX']}
                  label="奖品名称"
                  rules={[{ required: true, message: 'Please select gender!' }]}
                >
                  <Input style={{ width: '260px' }}></Input>
                </Form.Item>
              </Modal>
              <Button onClick={showModal}>
                <PlusOutlined />
                添加
              </Button>
            </Panel>
          </Collapse>
          <Form.Item
            className="submitadd"
            wrapperCol={{ ...layout.wrapperCol, offset: 0 }}
          >
            <Button htmlType="submit" type="primary">
              {props.mydata.idtorData !== undefined ? '重新' : ''} 发布
            </Button>
            <Button htmlType="submit">上一步</Button>
            <Button htmlType="submit">预览</Button>
            <Button htmlType="submit">草稿</Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
//上传图片组件
class Imguplaoder extends Component {
  state = {
    previewVisible: false,
    previewImage: '',
    previewTitle: '',
    fileList: [],
  };
  handleCancel = () => this.setState({ previewVisible: false });
  handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
      previewTitle:
        file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
    });
  };
  handleChange = (e) => {
    /*      this.props.normFile(e)*/
    console.log(e, 'e');

    const fileList = e.fileList;
    this.setState({ fileList });
  };
  render() {
    const { previewVisible, previewImage, fileList, previewTitle } = this.state;
    const uploadButton = (
      <div>
        <PlusOutlined />
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <>
        <Upload
          action="/campus/campusweb/upload/pictureUpload"
          listType="picture-card"
          name="multipartFile"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
        >
          {fileList.length >= 2 ? null : uploadButton}
        </Upload>
        <Modal
          visible={previewVisible}
          title={previewTitle}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </>
    );
  }
}
